<template>
  <div class="header">
    <div class="header-left">
      <!-- 折叠按钮 -->
      <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="toggleCollapse">
        <el-icon v-if="isCollapse"><expand /></el-icon>
        <el-icon v-else><fold /></el-icon>
      </span>

      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
        <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 用户信息下拉菜单 -->
    <el-dropdown class="header-right">
      <div class="user-info">
        <img :src="user.avatarUrl" alt="用户头像" class="user-avatar" />
        <span>{{ user.nickname }}</span>
        <el-icon><arrow-down /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <router-link to="/password">修改密码</router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/person">个人信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item @click="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>


import { ref, computed } from 'vue';
import { useStore } from 'vuex';  // 新增导入
import { useRouter, useRoute } from 'vue-router';
import { Expand, Fold, ArrowDown } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const store = useStore();  // 获取store实例
const router = useRouter();
const route = useRoute();

// 从Vuex Store获取用户信息
const user = computed(() => {
  const userInfo = store.state.user.userInfo || {};
  return {
    nickname: userInfo.nickname || '未命名用户',
    avatarUrl: userInfo.avatar || 'https://example.com/default-avatar.png'
  };
});

// 侧边栏折叠状态
const isCollapse = ref(false);

// 折叠按钮的类名
const collapseBtnClass = computed(() => 
  isCollapse.value ? 'el-icon-s-unfold' : 'el-icon-s-fold'
);

// 当前路由名称
const currentPathName = computed(() => route.meta.title || route.name);

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
  window.dispatchEvent(new CustomEvent('toggle-collapse', { 
    detail: isCollapse.value 
  }));
};

// 退出登录
const logout = () => {
  ElMessageBox.confirm('确定退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 清除Vuex中的用户信息
    store.commit('user/LOGOUT');
    router.push('/login');
    ElMessage.success('退出成功');
  });
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.el-dropdown-menu {
  width: 120px;
  text-align: center;
}

.el-dropdown-menu a {
  text-decoration: none;
  color: inherit;
}
</style>